<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      #user_msg ul{
          list-style: none;
      }
  </style>
  <script>
    let obj=new URLSearchParams(location.search);
    let $uname=obj.get("uname");
    function show_name(){
      name.innerHTML=$uname;
    }

  </script>
</head>
<body onload="show_name()">
  <div>
    <div id="name"></div>
    <div><button onclick="show_usr()">账号设置</button></div>
    <div id="d_list"></div>
  </div>
  <script>
    function show_usr(){
      let xhr=new XMLHttpRequest();
      xhr.onreadystatechange=function(){
        if(xhr.readyState===4 && xhr.status===200){
          let r=JSON.parse(xhr.responseText);
          let _uname=(r[0].uname)?r[0].uname:"";
          let _email=(r[0].email)?r[0].email:"";
          let _phone=(r[0].phone)?r[0].phone:"";
          let _user_name=(r[0].user_name)?r[0].user_name:"";
          let _birthday=(r[0].birthday)?r[0].birthday:"";
          str=`<div id="user_msg">
                 <ul>
                    <li>用户名：</li>
                    <li><input type="text" id="uname" value=${_uname}></li>
                 </ul>
                 <ul>
                    <li>邮箱：</li>
                    <li><input type="text" id="email" value=${_email}></li>
                 </ul>
                 <ul>
                    <li>电话：</li>
                    <li><input type="text" id="phone" value=${_phone}></li>
                 </ul>
                 <ul>
                    <li>真实姓名：</li>
                    <li><input type="text" id="user_name" value=${_user_name}></li>
                 </ul>
                    <li>性别：</li>
                    <li><input type="radio" name="gender" value="1" id="man"><label for="man">男</label></li>
                    <li><input type="radio" name="gender" value="0" id="woman"><label for="woman">女</label></li>
                 </ul>
                 <ul>
                    <li>生日：</li>
                    <li><input type="date" id="birthday" value=${_birthday}></li>
                 </ul>
                 <ul>
                    <li><button id="but1" onclick="update()">确认修改</button></li>
                 </ul>
              </div>`
          list.innerHTML=str;
        }
      };
      xhr.open("POST","user/show_list",true);
      let formdata=`uname=${$uname}`;
      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      xhr.send(formdata);
    };
    function update(){
      let _uname=uname.value;
      let _email=email.value;
      let _phone=phone.value;
      let _user_name=user_name.value;
      let _birthday=birthday.value;
      let _gender=0;
      if(man.checked){
        _gender=man.value;
      }else{
        _gender=woman.value;
      }
      let xhr=new XMLHttpRequest();
      xhr.onreadystatechange=function(){
        if(xhr.readyState===4 && xhr.status===200){
          if(xhr.responseText==="1"){
            alert("修改成功！");
            location.reload();
          }else{
            alert("修改失败！");
          }
        }
      };
      xhr.open("put","/user/user_update",true);
      let formdata=`uname=${_uname}&email=${_email}&phone=${_phone}&user_name=${_user_name}&gender=${_gender}&birthday=${_birthday}`;
      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      xhr.send(formdata);
    }
  </script>
  <div id="list"></div>
</body>
</html>